<template><!--公开课详情-->
    <div style="height: 100%;" v-if="freshDetail">
        <div v-show="!isCoverTopElement">
            <div v-show="$store.state.config.iosHeaderShow">
                <navbar class="header-title-01 header-title-clamp" :title="$t('open_detail')" :backCallback="back">
                    <template #right>
                        <a class="add-btn" v-if="isDown" style="color: #000" :href="src" download>
                        {{ $t('lab_download') }}
                        </a>
                    </template>
                </navbar>
                <div v-if="videoList[playIndex]" class="detail-video" style="position: absolute;width: 100%;top: 56px;">
                    <xg-player v-if="isShow" :data-idkey="this.$route.query.modId" :style="{'width': '100%', 'padding-top': '0'}" ref="video"
                        :videoConfig="videoConfig" :modOpenTrial="modOpenTrial" :modDrag="modDrag" :iosTimes="iosTimes"
                        @playerVideo='playerVideo' :fastForward="fastForward"
                        @on-goLandscape="goLandscape" :type="type"></xg-player>
                   <div v-if="!videoList[playIndex]" class="detail-video-no">
                        <div>{{ $t("open_no_video") }}</div><!-- 暂无播放视频 -->
                        <div>The media could not be loaded,either because the server or network failed or because the format is not supported.</div>
                    </div>
                </div>
                <van-empty v-else :description="$t('no_data')" />
            </div>
        </div>
        <div v-if="videoList[playIndex]" style="height: 267px;"></div>
        <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%; padding-bottom: 60px;">
            <div style="background:#ffffff;border-bottom: 1px dashed #cccccc;" ref="commentList">
                <div class="detail-title">
                    <div :class="{'cur': elegance}">
                        {{freshDetail.itmTitle}}
                    </div>
                    <div>
                        <span class="point"></span>
                        <span>{{ $t("cos_publish_time") }}：{{freshDetail.itmCreateTimestamp | substringTime}}</span>
                    </div>
                </div>
                <div style="padding-bottom: 30px">
                    <div>
                        <!--简介-->
                        <div style="padding: 40px 15px 20px 15px;border-bottom: 1px dashed rgb(204, 204, 204);">
                            <div style="margin-bottom: 20px;">{{ $t("mod_desc") }}:</div>
                            <div v-html="$xss(itmDescHandler(freshDetail.itmDesc))"></div>
                        </div>
                        <div class="detail-video-list" @click="isVideosList()">
                            <div><!--学习列表-->
                                {{ $t("open_learning_list") }}
                            </div>
                            <div style="color: #999999;font-size: 14px;font-weight: bold"><!--查看更多-->
                                {{ $t("open_see_more", {value: videoList && videoList.length ? videoList && videoList.length : 0}) }}
                            </div>
                        </div>
                        <div class="scroller-x">
                            <div class='detail-video-showList' :style="{'width': videoList && 198 * videoList.length + 'px'}">
                                <div class='detail-video-showListContent' :class="{'cur': playIndex == index}" v-for="(item, index) in videoList" :key="index">
                                    <div>
                                        <span></span>
                                        <!--简介-->
                                        <span @click="isVideoElegance(index)" v-if="item.desc !== ''">{{ $t("mod_desc") }}>></span>
                                        <span class="color999" v-if="item.desc == ''">{{ $t("mod_desc") }}>></span>
                                    </div>
                                    <div @click="selectedVideo(index)">{{index + 1}}. {{item.resTitle}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <van-list v-if="false"
                v-model="isLoading"
                :finished="finished"
                :finished-text="(finished&&commentCount>0) ? $t('no_more') : ''"
                loding-text="loading"
                @load="getCommentList"
                >
                <comment-list @change-success="changeSuccess"
                            @setCoverTopElement="setCoverTopElement"
                            :moreCommentCount="true"
                            :pageNo="pageNo"
                            :id="this.$route.params.id"
                            module="Course" tkh-id="-1"
                            :sendCommentOther="true"
                            style="height: calc(100% - 267px)"
                            ref="comment"
                            :showComment="showComment"
                            @focusInput="focusInput"
                            >
                    <!--评论点赞收藏-->
                </comment-list>
            </van-list>
        </van-pull-refresh>
        <!---->
        <!--简介弹出层-->
        <div class="video-elegance" v-if="videoElegance != 0" @click="closeVideoElegance">
            <div class="box" :style="{'top': 300 + 'px'}" >
                <div class="clearfix"><em class="close-icon-02" @click="closeVideoElegance"></em></div>
                <div style="padding: 0 10px;"><!--视频简介-->
                    <p>{{ playIndex+1 }}.{{ $t("open_video_desc") }} ({{ videoList[playIndex].beginTime | substringTime }}{{ $t("btn_publish") }})</p><!--发布-->
                    <p class="margin-top5" style="color: #999999"> {{videoList[playIndex].desc}}</p>
                </div>
            </div>
        </div>
        <!--视频列表弹出层-->
        <div class="videos-list" v-if="videosList"><!--学习列表-->
            <div>{{ $t("open_learning_list") }}（{{videoList && videoList.length}}）<em class="close-icon-3" @click="videosList = false"></em></div>
            <ul>
                <li :class="{'cur': playIndex == index}" v-for="(item, index) in videoList" :key="index" @click="selectedVideo(index)">
                    <span></span>
                    {{index + 1}}. {{item.resTitle}}
                </li>
            </ul>
        </div>
        <!--评论弹出-->
        <div class="video-comment">

        </div>
        <!--提示层-->
        <van-dialog
            v-model="alterMsg.show"
            :title="alterMsg.firstLine"
            :message="alterMsg.secondLine"
            :confirm-button-text="$t('sure')"
            >
        </van-dialog>
        <div class="sendComment" >
            <div class="detail-voting" v-if="freshQuery">
                <!-- v-like="{type: 'Course', id: this.$route.params.id, isClick: ifLick, count: likeCount}" -->
                        <span @click="like({type: 'Course', id: $route.params.id, isClick: ifLick})" :class="{'cur': ifLick}" class="commentFoot-like">{{ likeCount ? likeCount : 0}}</span>
                             <!-- v-collection="" -->
                        <span @click="collection({type: 'Course', id: $route.params.id, isClick: ifCollect})" :class="{'cur': ifCollect}"
                              class="commentFoot-collection"
                              id="collection">
                                {{collectCount ? collectCount : 0}}
                        </span>
                      <!-- <span @click="jumpCommentList" style="font-size: 12px"></span> -->
<!--                        <span @click="jumpCommentList">{{details.item.itm_comment_total_count ? details.item.itm_comment_total_count : 0}}</span>-->
                    </div>
        <!--  -->
      </div>
    </div>
</template>

<script>
import CommentList from '@/repeatComponents/commentList/CommentList';
import xgPlayer from '@/components/player/xgplayer';
import { Empty, Toast as vToast } from 'vant';
export default {
    name: 'OpenDetail',
    components: {
        xgPlayer,
        CommentList,
        vanEmpty: Empty,
        vToast
    },
    data() {
        return {
            details: {},
            playIndex: 0,
            elegance: false,
            videoElegance: 0,
            videosList: false,
            isPlayVideo: false,
            pageNo: 1,
            collectionMsg: '',
            alterMsg: {
                show: false,
                firstLine: '',
                secondLine: ''
            },
            isCoverTopElement: false,
            videoImgUrl: '', //视频截图
            /*新的参数*/
            freshDetail: {}, //课程详情
            videoList: [], //视频列表
            src: '', //播放的视频地址
            freshQuery: {},
            ifLick: false,
            ifCollect: false,
            collectCount: 0,
            likeCount: 0,
            commentCount: 0, //评论数量
            currentTime: 0,
            isDown: false,
            confirmTip: false,
            sendCommentOther: true,
            userIdObj: {},
            module: 'COURSE',
            commentList: [],
            total: 0,
            deleteUserId: {},
            showComment: false,
            isLoading: true,
            isFocusInput: false, //输入框是否获得焦点
            page: {
                pageNo: 1,
                pageSize: 10,
                totalRecord: 0,
                totalPage: 0,
                init: true
            },
            moreCommentCount: true,
            finished: false,
            isRefresh: false,
            currCourse: '',
            modOpenTrial: true, // 权限控制
            modDrag: true,
            iosTimes: false,
            player: {},
            isShow: false,
            dom: '',
            videoConfig: {
                videoUrl: '', // 播放地址
                lastPlayTime: '' // 上次播放时间
            },
            isShowHead: true,
            type: '', //类型 VOD AUD
            fastForward: true
        };
    },
    methods: {
        goLandscape(val) {
            this.isShowHead = val === 'OFF';
        },
        playerVideo(val) {
            this.playHandle(val.currentTime);
        },
        /**
         * 处理视频播放时长
         */
        playHandle(times) {
            this.player = document.querySelector(this.dom);
            if (this.player) {
                const viewTime = times || this.player.currentTime;
                this.currentTime = this.player.currentTime;
                localStorage.setItem(this.$route.query.modId + '-' + this.src.substring(this.src.lastIndexOf('/') + 1), JSON.stringify(viewTime)); //缓存时间
            }
        },
        back() {
            if (this.videoList[this.playIndex] && this.videoList[this.playIndex].modType === 'VOD' && this.currentTime > 0) {
                localStorage.setItem(this.videoList[this.playIndex].moduleId + '-' + this.src.substring(this.src.lastIndexOf('/') + 1), JSON.stringify(this.currentTime)); //缓存时间
            }
            this.$router.go(-1);
        },
        deletecomments() {
            this.commentList = [];
        },
        focusInput(name, id, userId, repalyTo, index) {
            this.userIdObj = {
                id,
                userId,
                repalyTo,
                index
            };
            this.$refs.commentInput0.focus();
            this.$refs.commentInput0.setAttribute('placeholder', `@${name}`);
        },
        inputBlur(type) {
            if (type === 0) {
                this.$refs.commentInput0.setAttribute(
                    'placeholder',
                    this.$t('comment_write')
                ); //写评论...
                // this.isFocusInput = false;
                if (this.$refs.commentInput0.innerHTML === '') {
                    this.userIdObj = {};
                }
            } else {
                this.$refs.commentInput1.setAttribute(
                    'placeholder',
                    this.$t('comment_write')
                ); //写评论...
                // this.isFocusInput = false;
                if (this.$refs.commentInput1.innerHTML === '') {
                    this.userIdObj = {};
                }
            }
        },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.page.pageNo = 1;
                this.getCommentList();
                this.isRefresh = false;
            }, 900);
        },
        /*评论加载成功回调*/
        changeSuccess() {
            this.onFetching = false;
        },
        /*视频播放*/
        playVideo() {
            this.$refs.video.play();
            this.isPlayVideo = true;
        },
        // getDetail() {
        //     this.$axios({
        //         method: 'GET',
        //         url: `/app/course/openDetailJson/${this.$route.params.id}`,
        //         params: {
        //             'isMobile': true
        //         }
        //     }).then(res => {
        //         this.isTop = true;
        //         this.details = res.data;
        //         this.setVideoImgUrl(this.details, this.playIndex);
        //     });
        // },
        /*获取课程详情*/
        getFreshDetail() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/course/detail`,
                params: {
                    itmId: this.$route.params.id,
                    mobileInd: 1
                }
            }).then((res) => {
                this.isTop = true;
                this.freshDetail = res.data;
                //如果有文件夹将里面的内容抽取出来
                this.videoList = this.operateDirData(res.data.contentList);
                if (this.videoList.length > 0) {
                    this.analysisSrc(this.videoList[0]);
                }
            }).catch(err => {
                if (err.response) {
                    this.$toast(err.response.data.errMsg);
                }
                setTimeout(() => {
                    this.$router.go(-1);
                }, 500);
            });
        },
        /**
         * @name 点赞
         */
        like(binding) {
            let isClick = binding.isClick;
            if (isClick) {
                this.$axios({
                    method: 'POST',
                    url: `/app/api/valuation/like`,
                    data: {
                        targetId: Number(binding.id),
                        typeEnum: binding.type.toUpperCase(),
                        isLike: false,
                        isComment: false
                    }
                }).then(res => {
                    if (res.data.errCode === 'success') {
                        vToast(this.$t('circle277'));
                        this.getLikeCount();
                    }
                });
            } else {
                this.$axios({
                    method: 'POST',
                    url: `/app/api/valuation/like`,
                    data: {
                        targetId: Number(binding.id),
                        typeEnum: binding.type.toUpperCase(),
                        isLike: true,
                        isComment: false
                    }
                }).then(res => {
                    if (res.data.errCode === 'success') {
                        vToast(this.$t('circle276'));
                        this.getLikeCount();
                    }
                });
            }
        },
        /**
         *@name 收藏
         *@param {binding}
         *@type {object}
         */
        collection(binding) {
            let isClick = binding.isClick;
            if (isClick) {
                this.$axios({
                    method: 'DELETE',
                    url: `/app/api/collect`,
                    params: {
                        targetId: Number(binding.id),
                        module: binding.type.toUpperCase()
                    }
                }).then(res => {
                    if (res.data.errCode === 'success') {
                        vToast(this.$t('cancel_collect_success'));
                        this.getLikeCount();
                    }
                }).catch(() => {

                });
            } else {
                this.$axios({
                    method: 'POST',
                    url: `/app/api/collect`,
                    params: {
                        targetId: Number(binding.id),
                        module: binding.type.toUpperCase()
                    }
                }).then(res => {
                    if (res.data.errCode === 'success') {
                        vToast(this.$t('collect_success'));
                        this.getLikeCount();
                    }
                }).catch(() => {

                });
            }
        },
        /*获取点赞相关信息*/
        getLikeCount() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/course/sns-count`,
                params: {
                    itmId: this.$route.params.id
                }
            }).then((res) => {
                if (res && res.status === 200) {
                    this.freshQuery = res.data;
                    this.ifLick = res.data.isLike;
                    this.ifCollect = res.data.isCollect;
                    this.collectCount = res.data.collectCount;
                    this.likeCount = res.data.likeCount;
                }
            });
        },
        /*获取模块详情*/
        getModuleDetail(details) {
            let modId = details.moduleId;
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/course/module/detail`,
                params: {
                    itmId: this.$route.params.id,
                    modId: modId
                }
            }).then(res => {
                if (res && res.status === 200) {
                    this.src = this.appUrl + res.data.sourceUrl;
                    this.isDown = res.data.relationVO.modDownloadInd;
                    this.type = res.data.modType;
                    this.dom = this.type === 'VOD' ? 'video' : 'audio';
                    this.isShow = true;
                    this.fastForward = res.data.fastForward || true;
                    if (res.data.modType === 'VOD') {
                        let time = Number(localStorage.getItem(this.videoList[this.playIndex].moduleId + '-' + this.src.substring(this.src.lastIndexOf('/') + 1)));
                        if (time && time !== 0) {
                            this.currentTime = time;
                        }
                    }
                    if (!this.iosTimes) {
                        this.videoConfig = {
                            videoUrl: this.appUrl + res.data.sourceUrl,
                            lastPlayTime: this.currentTime
                        };
                        if (res.data.modType === 'AUD') {
                            this.videoConfig.duration = res.data.audDuration;
                        }
                    }
                }
            });
        },
        postComment(type) {
            let {
                id = this.$route.params.id,
                userId = 0,
                repalyTo = userId,
                index
            } = this.userIdObj;
            var len = 0;
            let parData = {
                commentId: this.userIdObj.id ? this.userIdObj.id : 0,
                topCommentId: this.userIdObj.repalyTo ? this.userIdObj.repalyTo : 0,
                content: this.$refs.commentInput0.innerText,
                type: this.module.toUpperCase()
            };
            if (!this.userIdObj.repalyTo) {
                parData.targetId = this.$route.params.id;
            }
            if (type === 0) {
                for (var i = 0; i < this.$refs.commentInput0.innerText.length; i++) {
                    if (
                        this.$refs.commentInput0.innerText.charCodeAt(i) > 127 ||
                        this.$refs.commentInput0.innerText.charCodeAt(i) === 94
                    ) {
                        len += 2;
                    } else {
                        len += 1;
                    }
                }
                if (len > 0 && len <= 400) {
                    this.$axios({
                        method: 'POST',
                        url: `/app/api/comment`,
                        params: {
                        },
                        data: parData
                    }).then(res => {
                        this.$refs.comment.conmmentList = [];
                        this.$refs.commentInput0.innerText = '';
                        this.userIdObj = {};
                        this.total = 0;
                        this.page.pageNo = 1;
                        this.getCommentList();
                    });
                } else if (len === 0) {
                    this.$toast(this.$t('message_please_content'));
                } else {
                    this.$toast(this.$t('comment_max_input'));
                }
            }
        },
        operateDirData(list) {
            let tempList = [];
            if (list) {
                list.forEach(item => {
                    if (item.nodeType === 0) { //是文件夹
                        if (item.childList && item.childList.length > 0) {
                            item.childList.forEach(v => {
                                if (v.nodeType === 1) {
                                    tempList.push(v.moduleBaseDTO);
                                }
                            });
                        }
                    } else {
                        tempList.push(item.moduleBaseDTO);
                    }
                });
            }
            return tempList;
        },
        selectedVideo(index) {
            this.isShow = false;
            if (this.videoList[this.playIndex].modType === 'VOD' && this.currentTime > 0) {
                localStorage.setItem(this.videoList[this.playIndex].moduleId + '-' + this.src.substring(this.src.lastIndexOf('/') + 1), JSON.stringify(this.currentTime)); //缓存时间
            }
            this.currentTime = 0;
            this.playIndex = index;
            this.isPlayVideo = false;
            this.currentTime = 0;
            this.player = {};
            this.analysisSrc(this.videoList[index]);
            // this.breakpointplay(this);
        },
        isElegance() {
            this.elegance = !this.elegance;
        },
        isVideoElegance(index) {
            // this.videoElegance = this.$refs.detailVideo.$el.offsetTop - 300;
            this.videoElegance = true;
            this.playIndex = index;
        },
        closeVideoElegance() {
            this.videoElegance = 0;
        },
        jumpCommentList() {
            //触发评论的去的跳转事件
            this.$refs.comment.jump();
            this.$refs.scrollerBottom.reset(parseInt(window.getComputedStyle(this.$refs.commentList).getPropertyValue('height')));
        },
        async analysisSrc(details) {
            // let src = '';
            // if (details.coscontent[playIndex].res_src_link.includes('https://') || details.coscontent[playIndex].res_src_link.includes('http://')) {
            //     src = details.coscontent[playIndex].res_src_link;
            // } else {
            //     src = this.appUrl + '/resource/resource/' + details.coscontent[playIndex].res_id + '/' + details.coscontent[playIndex].res_src_link;
            // }
            // return src;
            await this.getModuleDetail(details);
            return this.src;
        },
        isCollection(action, res) {
            if (action === 'add') {
                if (res && res.first && !window.localStorage.getItem('isOpenDetailCollection')) {
                    window.localStorage.setItem('isOpenDetailCollection', true);
                    this.alterMsg.show = true;
                    this.alterMsg.firstLine = this.$t('lab_collect_open'); //收藏成功之后的公开课保存在
                    this.alterMsg.secondLine = this.$t('lab_collect_tips'); //「我的」-「我的收藏」功能中
                } else {
                    this.$toast(this.$t('collect_success'));
                }
            } else if (action === 'cancel') {
                this.$toast(this.$t('collect_cancel'));
            }
        },
        getCommentList() {
            this.isLoading = true;
            this.$axios({
                method: 'POST',
                url: `/app/api/comment/list`,
                params: {
                    pageSize: 10,
                    sortname: 's_cmt_create_datetime',
                    sortorder: 'desc',
                    moreCommentCount: this.moreCommentCount
                        ? this.moreCommentCount
                        : 'false',
                    pageNo: this.page.pageNo
                },
                data: {
                    targetId: this.$route.params.id,
                    isTop: true,
                    type: 'COURSE'
                }
            }).then(res => {
                this.isLoading = false;
                if (this.$refs.comment) {
                    this.commentCount = res.data.totalRecord;
                    this.$refs.comment.commentLists = [...this.commentList, ...res.data.results];
                    this.page.pageNo++;
                    if (this.$refs.comment.commentLists.length >= this.commentCount) {
                        this.finished = true;
                    }
                }
            });
        },
        isVideosList() {
            if (this.videoList && this.videoList.length === 0) {
                this.videosList = false;
            } else {
                this.videosList = true;
            }
        },
        setCoverTopElement(flag) {
            this.isCoverTopElement = flag;
        }
    },
    mounted() {
        this.isShow = false;
        this.getFreshDetail();
        this.getLikeCount();
        // this.breakpointplay(this);
        //获取评论数据
        this.getCommentList();
    },
    computed: {
        itmDescHandler() {
            return (itmDesc) => {
                if (!itmDesc) {
                    return '';
                }
                let desc = itmDesc;
                desc = desc.replace(/<img/g, "<img style='width: 100%;height: auto;'");
                desc = desc.replace(/<video/g, "<video style='width: 100%;height: auto;'");
                desc = desc.replace(/\n/g, '</br>');
                return desc;
            };
        }
    }
};
</script>

<style scoped>
    .detail-video{
        height: 211px;
        position: relative;
        background: #000000;
        z-index: 1;
    }
    .detail-video .detail-video-no{
        position: absolute;
        top: 75px;
        z-index: 8;
        padding-left: 192px;
    }
    .detail-video .detail-video-no div:first-child{
        color: #dcf000;
        margin-bottom: 18px;
    }
    .detail-video .detail-video-no div:last-child{
        color: #ffffff;
        opacity: .37;
        font-size: 7px;
    }
    .detail-video video{
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;
    }
    .detail-video img{
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 3;
    }
    .detail-video span:first-child{
        width: 56px;
        height: 56px;
        display: flex;
        border-radius: 100%;
        background: rgba(0,0,0,.5);
        position: absolute;
        justify-content: center;
        align-items: center;
        top: 50%;
        margin-top: calc(-56px / 2);
        left: 50%;
        margin-left: calc(-56px / 2);
        z-index: 6;
    }
    .detail-video span:first-child:after{
        content: '';
        display: block;
        width: 15px;
        height: 20px;
        background: url(./images/icon1.png) no-repeat 1px -2px;
        background-size: 15px;
    }
    .detail-title,.detail-voting{
        padding: 40px 15px 0 15px;
    }
    .detail-title p{
        margin-top: 15px;
        margin-bottom: 25px;
        color: #999999;
    }
    .detail-title p span{
        display: block;
        color: #1a1a1a;
        margin-bottom: 15px;
    }
    .detail-voting{
        padding: 0;
        display: flex;
        width: 100%;
        overflow: hidden;
    }
    .detail-voting span{
        /* width: calc(100% / 3); */
        width: 50%;
        color: #666666;
        display: flex;
        align-items: center;
        flex-flow: column;
    }
    /* .detail-voting span:last-child:before{
        width: 20px;
        height: 20px;
        content: '';
        display: inline-block;
        background: url(../../../static/images/icon-03.png) no-repeat 0 -116px;
        background-size: 20px;
        margin-bottom: 7px;
    } */
    .detail-title div:first-child{
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 15px;
    }
    .detail-title div:first-child:after {
        content: '';
        display: block;
        width: 9px;
        height: 15px;
        /* background: url(./images/icon1.png) no-repeat 0 -9px; */
        background-size: 9px;
        float: right;
    }
    .detail-title div.cur:first-child:after{
        transform: rotate(90deg);
    }
    .detail-title div:last-child span{
        color: #999999;
    }
    .detail-video-list{
        padding: 40px 15px 20px 15px;
        overflow: hidden;
    }
    .detail-video-list div:first-child{
        float: left;
    }
    .detail-video-list div:last-child{
        float: right;
        display: flex;
    }
    .detail-video-list div:last-child:after, .detail-video-list div:last-child:after{
        margin-left: 8px;
        content: '';
        display: inline-block;
        width: 9px;
        height: 15px;
        background: url(./images/icon1.png) no-repeat 0 -15px;
        background-size: 10px;
        margin-top: 3px;
    }
    .detail-video-list div:last-child:after {
        display: none;
    }
    .detail-video-showList{
        padding: 0 15px;
        overflow: auto;
        white-space:nowrap;
    }
    .detail-video-showListContent{
        height: 128px;
        width: 188px;
        display: inline-block;
        margin-right: 10px;
        background: #fafafa;
        float: left;
    }
    .detail-video-showListContent.cur{
        color: #075ebb;
    }
    .detail-video-showListContent.cur div:first-child span:first-child{
        background: #075ebb;
    }
    .detail-video-showListContent div:first-child span:before{
        content: '';
        display: block;
        width: 6px;
        height: 13px;
        background: url(./images/icon1.png) no-repeat 0 2px;
        background-size: 6px;
        margin: 0 auto;
    }
    .detail-video-showListContent div:first-child{
        padding: 10px 15px 10px 0;
        overflow: hidden;
    }
    .detail-video-showListContent div:first-child span:first-child{
         float: left;
        width: 23px;
        height: 13px;
        background: #666;
     }
    .detail-video-showListContent div:first-child span:first-child.cur{
        background: #075ebb;
        width:50%
    }
    .detail-video-showListContent div:first-child span:last-child{
        float: right;
        font-size: 12px;
    }
    .detail-video-showListContent div:last-child{
        padding: 10px 25px 20px 25px;
        white-space: initial;
    }
    .video-elegance{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        display: flex;
        justify-content: center;
        z-index: 99;
    }
    .video-elegance .box{
        width: calc(90% - 50px);
        position: absolute;
        min-height: 150px;
        background: #ffffff;
        box-shadow:0 0 3px #999999;
        border-radius: 3px;
        padding: 0 15px 25px;
    }
        .detail-voting{
        position: relative;
        bottom: -15px;
        z-index: 999;
    }

    .videos-list{
        position: fixed;
        width: 100%;
        height: calc(100% - 267px);
        z-index: 99;
        bottom: 0;
    }
    .videos-list ul{
        height: calc(100% - 56px);
        overflow: auto;
        padding: 20px 15px 0 15px;
        background: #ffffff;
        box-sizing: border-box;
    }
    .videos-list ul li{
        padding: 15px 0;
        background: #fafafa;
        width: 100%;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        border: 1px solid #fafafa;
        border-radius: 2px;
    }
    .videos-list ul li span{
        width: 23px;
        height: 18px;
        display: flex;
        background-color:  #075ebb;
        display: flex;
       align-items: center;
        margin-right: 15px;
    }
    .videos-list ul li.cur{
        border: 1px solid #075ebb;
        color: #075ebb;
    }
    .videos-list ul li span:before{
        content: '';
        display: block;
        width: 6px;
        height: 13px;
        background: url(./images/icon1.png) no-repeat 0 2px;
        background-size: 6px;
        margin: 0 auto;
    }
    .videos-list div{
        height: 56px;
        background: #ffffff;
        text-align: center;
        line-height: 56px;
        position: relative;
        border-bottom: 1px solid #cccccc;
        font-size: 16px;
    }
    .close-icon-3{
        display: block;
        width: 16px;
        height: 16px;
        background: url(./images/icon1.png) no-repeat 0 -76px;
        background-size: 16px;
        position: absolute;
        top:50%;
        right: 15px;
        margin-top: -10px;
    }
    .close-icon-02 {
        background-size: 19px;
        background-position: 5px -26px;
    }
    .add-btn {
        height: 55px;
        line-height: 55px;
        padding: 0 15px;
        font-size: 16px;
        color: #000;
    }
      /*发布评论*/
.sendComment {
  /* display: flex; */
  justify-items: center;
  align-items: center;
  position: fixed;
  bottom: 0px;
  height: 60px;
  width: 100%;
  background: #ffffff;
  border-top: 1px solid #dddddd;
  flex-wrap: nowrap;
  z-index: 98;
}
.commentFoot-contenteditable {
  width: calc(100% - 20%);
  min-height: calc(56px - 30px);
  max-height: 100px;
  float: left;
  border: none;
  font-size: 14px;
  overflow-y: auto;
  padding: 15px;
  outline: none;
}
.commentFoot-contenteditable:empty:before {
  content: attr(placeholder);
  color: #bbb;
}
.commentFoot-contenteditable:before {
  content: none;
}
.commentFoot-issue {
  float: left;
  line-height: 56px;
  font-size: 14px;
  color: #075ebb;
}
/*评论*/
.comment-content {
  height: calc(100% - 56px);
  box-sizing: border-box;
}
.scroller-x{
    width: 100%;
    overflow: hidden;
    overflow-x: scroll;
    white-space: nowrap;
}
.scroller-x::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
}
</style>
